<template>
  <div class="index-page">
    <a-menu v-if="menuVisible" style="width: 256px; height: 100vh" mode="inline" theme="dark">
      <a-menu-item key="user">
        <router-link to="/user">用户管理</router-link>
      </a-menu-item>
      <a-menu-item key="drug">
        <router-link to="/drug">药品说明书管理</router-link>
      </a-menu-item>
      <a-menu-item key="feedback">
        <router-link to="/feedback">用户反馈管理</router-link>
      </a-menu-item>
    </a-menu>
    <div style="width: 100%; height: 100%">
      <a-page-header
        style="border: 1px solid rgb(235, 237, 240); width: 100%; height: 60px"
        :title="title"
        @back="() => this.$router.back()"
      />
      <div style="width: 100%; height: 100%">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
  props: {},
  data() {
    return {
      rootSubmenuKeys: ["user", "drug"],
      openKeys: ["drug"],
      selectedKeys: [],
      routerTitle: {
        user: "用户管理",
        drug: "药品说明书管理",
      },
    };
  },
  computed: {
    title() {
      console.log('router',this.$route);
      return this.$route.meta.title;
    },
    menuVisible(){
      console.log('route',this.$route.path!='/login',this.$route);
      return this.$route.path!='/login';
    },
  },
  watch: {},
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );

      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.index-page {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
</style>
